<template>
	<view class="changingSlider-step" :style="[
		{'height': blockSize+'px'},
		{'width': Width+'px'},
	]">
		<!-- 进度条盒子 -->
		<view class="Slider-box" :style="[
			{'background-color': SliderBoxColor},
			{'width': Width+'px'},
			{'height': Height+'px'},
			{'border-radius': Height+'px'}
		]">
			<!-- 左边已选择部分 因为点从0开始 第一个点是0 其实第二个点才是第1个距离 如66px -->
			<view class="Slider-box__s-left" :style="[
				{'background-color': activeBackgroundColor},
				{'background-image': activeBackgroundImage},
				{'height': Height+'px'},
				{'width': (leftWidth * (Value-1))+'px'}
			]"></view>
		</view>
		<!-- 进度条分段部分 -->
		<view class="Stepnum-box" :style="[
			{'width': Width+'px'},
			{'height': blockSize+'px'},
		]">
			<!-- 分段小圆点指示器 第二个left是用来把最后一个定位小圆点left取消的，然后right是让最后一个小圆点生效，不然最后一个小圆点距离在最后就是设置的宽度，然后他其实在可视区之外，看不见 -->
			<view v-for="(item,index) in stepnum" :key="index"
			class="Stepnum-box__left-Step-item" :style="[
				{'background-color': blockbgColor},
				{'border-radius': Height/2+'px'},
				{'width': Height+'px'},
				{'height': Height+'px'},
				{'left': index >=1 ? ((leftWidth*index)-(Height/2))+'px' : '0px'},
				{'left': index == (stepnum-1) ? 'inherit' : index >=1 ? ((leftWidth*index)-(Height/2))+'px' : '0px'},
				{'right': index == (stepnum-1) ? '0px' : 'inherit'}
			]"></view>
			<!-- 透明不可见的大圆点指示器，定位在每个小圆点之上，用于点击范围更大 -->
			<view v-for="(item,curindex) in stepnum" :key="curindex"
			class="Stepnum-box__left-Step-item-block" @click.stop="change(curindex)"
			:style="[
				{'left': curindex >=1 ? ((leftWidth*curindex)-(Height/2))+'px' : Height+'px'},
				{'left': curindex == (stepnum-1) ? 'inherit' : curindex >=1 ? ((leftWidth*curindex)-(blockSize/2))+'px' : '0px'},
				{'right': curindex == (stepnum-1) ? '0px' : 'inherit'},
				{'width': blockSize+'px'},
				{'height': blockSize+'px'},
				{'border-radius': blockSize+'px'},
				{'background-color': blockbgColor}
			]"></view>
		</view>
		<!-- 分段选中项大圆点指示器（绝对定位）从1开始，所以值不用减1 -->
		<view class="block-current" :style="[
			{'left': Value >1 ? (leftWidth*(Value-1)-(blockSize/2))+'px' : Value==1 ? '0px' : '0px'},
			{'left': Value == stepnum ? (Width-blockSize)+'px' : Value >1 ? (leftWidth*(Value-1)-(blockSize/2))+'px' : Value==1 ? '0px' : '0px'},
			{'width': blockSize+'px'},
			{'height': blockSize+'px'},
			{'border-radius': blockSize+'px'},
			{'background-color': blockbgColor}
		]"></view>
	</view>
</template>

<script>
	export default {
		name:"changingSlider-step",
		props:{
			// 自定义方法类型
			Event_type:{
				type:String,
				default:''
			},
			// 进度条的值
			Value:{
				type:Number,
				default:1
			},
			// 宽度
			Width:{
				type:Number,
				default:200
			},
			Height:{
				type:Number,
				default:5
			},
			//左右间隙（用于外层容器，让下面的元素居中）
			column_gap:{
				type:Number,
				default:30
			},
			// 分段（将进度条分成几等份可点击的定位点）
			stepnum:{
				type:Number,
				default:4
			},
			// 大圆点指示器的大小（最小30，小于30样式存在错位）
			blockSize:{
				type:Number,
				default:30
			},
			// 大圆点指示器的颜色
			blockbgColor:{
				type:String,
				default:'#fff'
			},
			// 线性渐变背景色（左边已选择部分）
			activeBackgroundImage:{
				type:String,
				default:'linear-gradient(to right,#00cefe,#00e208)'//爱奇艺'linear-gradient(to right,#00cefe,#00e208)'
			},
			// 背景色（左边已选择部分）
			activeBackgroundColor:{
				type:String,
				default:'#00d0d3'
			},
			// 盒子背景颜色（右边未选择部分）
			SliderBoxColor:{
				type:String,
				default:'rgba(255, 255, 255, 0.25)'
			},
		},
		data() {
			return {
				leftWidth: 0,//每一段的距离
			}
		},
		watch:{
			// 分段（将进度条分成几等份可点击的定位点）
			stepnum:{
				handler(newNum,oldNum){
					/* ps => 分成4个可点击的定位点，就是分成3份的平均距离，因为从0开始 */
					this.leftWidth = this.Width / (this.stepnum - 1)
				},
				immediate:true,
			}
		},
		methods:{
			change(index){
				//console.log(index+1)
				// 从0开始，所以需要加1
				let e = {
					type: this.Event_type,
					index: index+1
				}
				this.$emit('changing',e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	// 分段进度条（定点进度条）
	.changingSlider-step{
		/* #ifdef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		//background-color: #292929;
		position: relative;
	}
	
	.Slider-box{
		/* #ifdef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		position: absolute;
		background-color: rgba(255, 255, 255, 0.45);
		justify-content: center;
		
		&__s-left{}
	}
	
	.Stepnum-box{
		/* #ifdef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		position: absolute;
		justify-content: center;
		
		&__left-Step-item{
			position: absolute;
		}
		&__left-Step-item-block{
			position: absolute;
			opacity: 0;//这个是透明的，这是不可见的点击大圆点按钮
			//background-color: #292929!important;
		}
	}
	
	.block-current{
		position: absolute;
		opacity: 1;
		//background-color: #1dc!important;
	}
	
</style>
